<template>
  <div id="fashionable">
    <el-radio-group size="mini" v-model="activeName" class="tabs">
      <el-radio-button @click.native="getListid(1)" label="1">河内五</el-radio-button>
      <el-radio-button @click.native="getListid(2)" label="2">澳洲五</el-radio-button>
    </el-radio-group>
    <!-- 期分类账 -->
    <div style="margin-top:10px;">
      <span :class="{nowColor :ends==1}" @click="ends = 1">期分类账</span>
      <span :class="{nowColor :ends==2}" @click="ends = 2">日分类账</span>
    </div>
    <!-- 时间 -->
    <div style="margin-top:20px">
      <el-date-picker
        class="edge"
        style="width:180px"
        size="mini"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        v-model="startTime"
        type="date"
        placeholder="开始时间"
      ></el-date-picker>
      <span>至</span>
      <el-date-picker
        class="edge"
        style="width:180px"
        size="mini"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        v-model="endTime"
        type="date"
        placeholder="结束时间"
      ></el-date-picker>

      <!-- 期数 -->
      <!-- <el-select
        class="edge"
        style="width:180px"
        clearable
        size="mini"
        v-model="value"
        placeholder="期数"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>-->
      <el-input style="margin:10px 0;width:180px" size="small" v-model="value" placeholder="请输入期数"></el-input>
      <!-- 确定 -->
      <el-button style="margin-left:10px" size="mini" type="primary" @click="confirm">确认</el-button>
      <el-button style="margin-left:10px" size="mini">重置</el-button>
    </div>

    <!-- 列表 -->
    <div>
      <el-table
      :header-cell-style="{background:'#ccc'}"
        size="mini"
        row-key="index"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="categoryName" label="类别" width="180"></el-table-column>
        <el-table-column prop="quantity" label="笔数"></el-table-column>
        <el-table-column prop="itemAmount" label="投注金额"></el-table-column>
        <el-table-column prop="winAmount" label="中奖"></el-table-column>
        <el-table-column prop="backAmount" label="回水"></el-table-column>
        <el-table-column prop="profit" label="盈亏"></el-table-column>
        <!-- <el-table-column prop="amount3" label="日期"></el-table-column> -->
      </el-table>
      <!-- 分页 -->

      <!-- <div style="text-align:right;margin-top:20px">
        <el-pagination
          size="mini"
          class="pageNumage"
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>-->
    </div>
  </div>
</template>
<script>
import { getList } from "@/api/table";
import { category, current } from "@/api/user";
import qs from "qs";
export default {
  data() {
    return {
      startTime: "", //开始时间
      endTime: "", //结束时间
      ends: 2,
      activeName: 1,
      typeIndex: "1",
      dayTime: "",
      value: "20191031148",
      options: "",
      total: 0,
      pages: 1,
      // module:[],
      tableData: [],
      listid: "1",
      choose: ""
    };
  },
  created() {
    this.ledger();
    this.npertype();
  },
  methods: {
    // 期数
    npertype() {
      let data = qs.stringify({
        module: this.listid
      });
      current(data).then(res => {
        console.log(res.data, "期数");
        if (res.data.code == 200) {
          this.choose = res.data.data.issue;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 接口
    getListid(num) {
      this.listid = num;
    },
    // 确定
    confirm() {
      this.ledger();
    },
    // 分类账接口
    ledger() {
      let data = qs.stringify({
        module: this.listid,
        type: this.ends,
        issue: this.value,
        startTime: this.startTime,
        endTime: this.endTime
      });
      category(data).then(res => {
        console.log(res.data, 888);
        if (res.data.code == 200) {
          res.data.data.forEach((v, i) => {
            this.$set(v, "index", i + 1);
            v.children.forEach((item, index) => {
              this.$set(item, "index", (index + 100) * (i + 1));
            });
          });
          console.log(res.data.data, 55);
          this.tableData = res.data.data;
        }
      });
    }
  }
};
</script>
<style lang='less' scope>
#fashionable {
  margin-top: 20px;
  margin-left: 20px;
}
.edge {
  margin: 10px 10px 20px 0 !important;
}
.listOf {
  margin-top: 20px;
}
.nowColor {
  color: blue;
}
</style>